const path = require("path"); // 路径处理模块
const webpack = require("webpack"); // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入HtmlWebpackPlugin插件
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //引入分离插件

module.exports = {
  entry: {
    index: path.join(__dirname, "/src/index.js"), // 入口文件
    two: path.join(__dirname, "/src/two.js")
  },
  output: {
    path: path.join(__dirname, "/dist"), //打包后的文件存放的地方
    filename: "[name].[hash].js" //打包后输出文件的文件名
  },
  module: {
    rules: [{
        test: /\.css$/, // 正则匹配以.css结尾的文件
        use: ExtractTextPlugin.extract({
          // 这里我们需要调用分离插件内的extract方法
          fallback: "style-loader", // 相当于回滚，经postcss-loader和css-loader处理过的css最终再经过style-loader处理
          use: [{
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('autoprefixer')({
                    overrideBrowserslist: ['last 15 versions']
                  })
                ]
              }
            }
          ],
          publicPath: '../'
        }) // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
      },
      {
        test: /\.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件
        // use: ["style-loader", "css-loader", "sass-loader"] // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
        use: ExtractTextPlugin.extract({
          // 这里我们需要调用分离插件内的extract方法
          fallback: "style-loader", // 相当于回滚，经postcss-loader和css-loader处理过的css最终再经过style-loader处理
          use: [{
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('autoprefixer')({
                    overrideBrowserslist: ['last 15 versions']
                  })
                ]
              }
            },
            'sass-loader'
          ],
          publicPath: '../'
        })
      },
      {
        // jsx配置
        test: /(\.jsx|\.js)$/,
        use: {
          // 注意use选择如果有多项配置，可写成这种对象形式
          loader: "babel-loader"
        },
        exclude: /node_modules/ // 排除匹配node_modules模块
      },
      {
        // png jpg gif 图片配置
        test: /\.(png|jpg|svg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 1000, // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
            outputPath: 'images'
          }
        }]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new webpack.BannerPlugin("版权所有，翻版必究"), // new一个插件的实例
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "/src/index.html") // new一个这个插件的实例，并传入相关的参数
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin("css/index.[hash].css")
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: { // 抽离自己写的公共代码
          chunks: "initial",
          name: "common", // 打包后的文件名，任意命名
          minChunks: 2, //最小引用2次
          minSize: 0 // 只要超出0字节就生成一个新包
        },
        vendor: { // 抽离第三方插件
          test: /node_modules/, // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'vendor', // 打包后的文件名，任意命名
          // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
          priority: 10
        },
      }
    }
  },
};